<script setup lang="ts">
import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue';
import { Refresh } from '@element-plus/icons-vue';


const currentPage4 = ref(4)
const pageSize4 = ref(100)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}


let username = ref('')
let email = ref('')

const query = () => { }

const tableData = [
  {
    username: "李莲花",
    sex: "男",
    age: 38,
    email: "123456@qq.com",
    phone: 12345678901,
    address: "莲花楼",

  },
  {
    username: "方多病",
    sex: "男",
    age: 23,
    email: "fdb@qq.com",
    phone: 1589999999,
    address: "天机堂",

  },
  {
    username: "笛飞声",
    sex: "男",
    age: 39,
    email: "dfs@153.com",
    phone: 13266666666,
    address: "金鸳盟",

  },
  {
    username: "乔婉娩",
    sex: "女",
    age: 32,
    email: "qwm@163.com",
    phone: 12345678901,
    address: "四顾门",

  },
  {
    username: "角丽谯",
    sex: "女",
    age: 32,
    email: "jlq@163.com",
    phone: 1258888888,
    address: "金鸳盟",

  },

]
</script>

<template>
  <el-card>
    <div class="query-input">
      <el-input v-model="username" placeholder="请输入用户名" />
      <el-input v-model="email" placeholder="请输入邮箱" />
      <el-button type="primary" @click="query">
        <el-icon>
          <Search />
        </el-icon>
        查询
      </el-button>
      <el-button type="danger" @click="query">
        <el-icon>
          <Refresh />
        </el-icon>
        重置
      </el-button>
    </div>

  </el-card>

  <el-card>
    <el-table :data="tableData" stripe style="width: 100%">
      <el-table-column prop="username" label="姓名" width="180" />
      <el-table-column prop="sex" label="性别" width="180" />
      <el-table-column prop="age" label="年龄" width="180" />
      <el-table-column prop="email" label="邮箱" width="180" />
      <el-table-column prop="phone" label="电话" width="180" />
      <el-table-column prop="address" label="地址" />
      <el-table-column fixed="right" label="操作" width="180">
        <template #default>
          <el-button type="primary" size="small">编辑</el-button>
          <el-button type="danger" size="small">删除</el-button>
        </template>
      </el-table-column>

    </el-table>

    <div class="demo-pagination-block">
      <el-pagination v-model:current-page="currentPage4" v-model:page-size="pageSize4" :page-sizes="[100, 200, 300, 400]"
        :small="small" :disabled="disabled" :background="background" layout="total, sizes, prev, pager, next, jumper"
        :total="400" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
    </div>
  </el-card>
</template>

<style scoped>
.el-input {
  margin-right: 5px;
  width: 300px;
}

.query-input {
  display: flex;
  justify-content: center
}

.el-card {
  margin-bottom: 10px;
}

.demo-pagination-block {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
</style>